<template>
  <div class="content">
    <uv-cell-group :border="false">
      <uv-cell title="头像" :isLink="true" :border="false">
        <template v-slot:value>
          <uv-avatar :src="model.headimgurl" size="60" @click="chooseAvatar" shape="square"></uv-avatar>
        </template>
      </uv-cell>
      <uv-cell title="名字" :border="false">
        <template v-slot:value>
          <uv-input placeholder="请输入名字" border="none" v-model="model.nickname" inputAlign="right"></uv-input>
        </template>
      </uv-cell>
      <uv-cell title="我的手机号" :border="false">
        <template v-slot:value>
          <uv-input placeholder="请输入名字" border="none" v-model="model.mobile" inputAlign="right"></uv-input>
        </template>
      </uv-cell>
      <uv-cell title="微信号" :border="false">
        <template v-slot:value>
          <uv-input placeholder="请输入名字" border="none" v-model="model.wxNumber" inputAlign="right"></uv-input>
        </template>
      </uv-cell>
    </uv-cell-group>

    <view class="actionBtn">
      <uv-button text="保 存" type="primary" @click="save" :loading="loading"></uv-button>
    </view>
  </div>
</template>

<script setup lang="ts">
import { chooseImage } from "@/utils/auth.js";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();

let model = ref({
  mobile: "",
  nickname: "",
  headimgurl: "",
  wxNumber: "",
});
let loading = ref(false);

onShow(() => {
  init();
});

let init = () => {
  model.value = proxy.$utils.formatFunction(counter.releaseParams.userInfo, {
    ...model.value,
  });
};

//上传头像
async function chooseAvatar() {
  model.value.headimgurl = await counter.uploadImage();
}

let save = async () => {
  try {
    loading.value = true;
    if (!model.value.mobile) return proxy.$utils.showToast("请完善手机号");
    if (!model.value.wxNumber)
      return proxy.$utils.showToast("请完善微信号,方便买家联系");
    if (!proxy.$utils.validateWechatNumber(model.value.wxNumber))
      return proxy.$utils.showToast("请输入正确的微信号,方便买家联系");
    await proxy.$apis.userInfo({
      type: "edit",
      data: model.value,
    });
    proxy.$utils.showToast("设置成功", 1);
    await counter.getUserData();
    setTimeout(() => {
      proxy.$utils.back();
    }, 1000);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.actionBtn {
  padding: 15px;
  margin-top: 40px;
}
</style>
